<template>
  <view class="record-page">
    <uni-page-header title="打卡记录" />
    <view class="list-wrap">
      <view class="filter" @click="datePicker.show = true">
        <u-icon name="calendar" size="25" color="#000" />
        <view class="date-value">{{ dateValue }}</view>
        <u-icon name="arrow-down" size="15" color="#000" />
      </view>
      <view v-if="listData.length" class="list-container">
        <view v-for="(item, index) in listData" :key="index" class="list-item" @click="onToDetail(item)">
          <view class="date">{{ item.date_format }}</view>

          <view class="count-wrap">
            <view class="count-value">打卡{{ item.day_num }}次</view>
            <u-icon color="#333" size="15" name="arrow-right" />
          </view>
        </view>
      </view>
      <view v-else class="list-empty">
        <u-empty mode="list" icon-size="50" text="暂无打卡记录" />
      </view>
    </view>

    <u-datetime-picker
      v-model="datePicker.value"
      :show="datePicker.show"
      mode="year-month"
      close-on-click-overlay
      confirm-color="#78ffe6"
      @cancel="onDatetimePickerClose"
      @confirm="onDatetimePickerConfirm"
    />
  </view>
</template>

<script>
import dayJs from 'dayjs'
import {
  mapState
} from 'vuex'
import {
  wx_clockin_log_list
} from '../api/index.js'
export default {
  name: 'Record',
  data() {
    return {
      dateValue: dayJs().format('YYYY-MM'),
      datePicker: {
        value: dayJs().format('YYYY-MM'),
        show: false
      },
      listData: []
    }
  },
  computed: {
    ...mapState(['clockInRuleData'])
  },
  onLoad() {
    this.getListData()
  },
  methods: {
    onDatetimePickerConfirm({
      value
    }) {
      this.dateValue = dayJs(value).format('YYYY-MM')
      this.onDatetimePickerClose()
      this.getListData()
    },
    onDatetimePickerClose() {
      this.datePicker.show = false
    },
    async getListData() {
      const params = {
        is_details: false,
        ruleid: this.clockInRuleData.id,
        clockin_m: this.dateValue
      }
      console.log('打卡记录参数')
      console.log(params)
      const {
        clockin_list
      } = await wx_clockin_log_list(params)
      console.log('打卡记录结果')
      console.log(clockin_list)
      this.listData = clockin_list.length ? clockin_list.map(e => {
        e.date_format = this.$utils.dateFormat(e.clockin_date, 'YYYY年MM月DD日')
        return e
      }) : []
    },

    /**
			 * 查看详情
			 */
    onToDetail({
      clockin_date
    }) {
      this.$utils.navigateToPage('/pagesClockIn/detail', `date=${clockin_date}`)
    }
  }
}
</script>

<style lang="scss" scoped>
	.record-page {
		.list-wrap {
			width: 95%;
			padding: 15rpx;
			margin: 20rpx auto;

			.filter {
				width: 250rpx;
				hieght: 80rpx;
				@include flex-center;
				gap: 10rpx;
				margin-bottom: 30rpx;
				border-radius: 50rpx;
				border: 2rpx solid #E6E6E6;

				.date-value {
					font-size: 28rpx;
          color: '#000';
				}
			}

			.list-container {
				.list-item {
					padding: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 20rpx;
					background-color: #FFF;
					@include flex-between;
          box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0,0,0,0.05);
          .date{
            font-size: 32rpx;
          }
					.count-wrap {
						@include flex-center;
						gap: 10rpx;
            font-size: 28rpx;
					}
				}
			}

			.list-empty {
				margin-top: 50rpx;
			}
		}
	}
</style>
